<script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="js/jquery.validate.js" type="text/javascript"></script>
<script src="js/jquery.register.js" type="text/javascript"></script>

<style type="text/css">
  body{
    background-color:#FBFED3;
    font-family: comic sans ms;
  }
  table{
    background-color:#E2FEF0;
    font-size:25px;
  }
  thead th{
    background-color:#D7FDBB;
  }

  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="date"],
  input[type="file"],
  input[type="submit"],
  textarea,select{
    font-size:25px;
    border-radius:20px;
    border:1px solid green;
    margin:5px;
    padding:5px 15px;
    width:300px;
    color:blue;
    background-color:lightyellow;
  }
  .error{
    color:red;
    float: left;
    padding-left: 10px;
  }
  label{
    float: left;
  }
</style>

<form action="" id="registerId" method="get">

  <table  border="1" cellpadding="0" cellspacing="0" width="60%" align="center">
    <thead>
      <tr>
        <th colspan="2">Please fill the form</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td width="40%" align="right">Name :</td>
        <td width="60%">
  <input type="text"
         name="uname"
         placeholder="My name is..."
         required
         id="unameId" /></td>
      </tr>
      <tr>
        <td align="right">Email :</td>
        <td >
  <input type="email"
         name="email"
         placeholder="example@gmail.com"
         required
         autocomplete="off"
          /></td>
      </tr>

      <tr>
        <td align="right">Password :</td>
        <td >
  <input type="password"
         name="password"
         id="passwordId"
         placeholder="My password is.."
         required="true" /></td>
      </tr>

      <tr>
        <td align="right">Confirm Password :</td>
        <td >
  <input type="password"
         name="cpassword"
         placeholder="Same as above.."
         required="true"/></td>
      </tr>

      <tr>
        <td align="right">Gender :</td>
        <td >
  <label><input required type="radio" name="gender" value="m" />Male</label>
  <label><input required type="radio" name="gender" value="f" />female</label>
  <br>
  <label for="gender" class="error"></label>

  </td>
      </tr>

      <tr>
        <td align="right">Date of birth :</td>
        <td >
  <input type="date"
         name="dob"
         placeholder="YYYY-MM-DD"
         required="true" /></td>
      </tr>

      <tr>
        <td align="right">Address :</td>
        <td ><textarea required name="address" placeholder="My address is.." cols="20" rows="3"></textarea></td>
      </tr>

      <tr>
        <td align="right">Country :</td>
        <td >
  <select name="country_id" required >
    <option value="">-Select-</option>
    <option value="1">India</option>
    <option value="2">Pakistan</option>
    <option value="3">Nepal</option>
    <option value="4">Bangladesh</option>
  </select>
        </td>
      </tr>

      <tr>
        <td align="right">Languages :</td>
        <td >
  <select name="lang[]" required multiple>
    <option value="c">C</option>
    <option value="cpp">C++</option>
    <option value="java">Java</option>
    <option value="net">.Net</option>
    <option value="php">Php</option>
    <option value="py">Python</option>
  </select>
        </td>
      </tr>


      <tr>
        <td align="right">Hobbies :</td>
        <td >
  <label><input required type="checkbox" name="hobbies[]" value="cricket" />Cricket</label>
  <label><input required type="checkbox" name="hobbies[]" value="football" />Football</label>
  <label><input required type="checkbox" name="hobbies[]" value="chess" />Chess</label><br>
  <label><input required type="checkbox" name="hobbies[]" value="hockey" />Hockey</label>
  <label><input required type="checkbox" name="hobbies[]" value="cricket" />Cricket</label>

  <br>
  <label for="hobbies[]" class="error"></label>

  </td>
      </tr>


      <tr>
        <td align="right">Avatar :</td>
        <td ><input required type="file" name="avatar" /></td>
      </tr>


      <tr>
        <td align="right">&nbsp;</td>
        <td >
  <input type="submit"
         name="submit"
         value="I am done!!" /></td>
      </tr>
    </tbody>
  </table>
</form>
